<template>
  <div class="line-chart" ref="lineChartRef"></div>
</template>

<script lang="ts">
export default {
  name: "LineChart",
};
</script>

<script lang="ts" setup>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
const lineChartRef = ref();
onMounted(() => {
  const myChart = echarts.init(lineChartRef.value);
  const option = {
    grid: {
      left: 0,
      right: 0,
      top: 10,
      bottom: 0,
      //   containLabel: true, //显示刻度
    },
    xAxis: {
      data: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ],
      show: false,
      boundaryGap: false,
    },
    yAxis: {
      type: "value",
      show: false,
      /*  axisLine: { //显示刻度线
        show: true,
      }, */
      // 显示刻度
      //   axisTick: {
      //     show: true,
      //   },
      //   show:false,
    },
    series: {
      type: "line",
      data: [54, 23, 65, 43, 54, 22, 66, 77, 22, 11, 44, 15],
      smooth: true,
      itemStyle: {
        // 隐藏拐点
        opacity: 0,
      },
      areaStyle: {
        // 区域样式的颜色
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#a64ca6", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#fff", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
      lineStyle: {
        color: "#cc98cc",
      },
    },
  };
  myChart.setOption(option);
});
</script>

<style scoped>
.line-chart {
  width: 100%;
  height: 100%;
}
</style>